import {
  colorOptions,
  drawerColumns,
  drawerFormState,
  drawerInstance,
  indateOptions,
  orderStatusOptions,
  userDetailLoading,
} from "./store";
import UserDetail from "./userDetail";
export const drawerVisible = ref(false);
export const drawerTitle = ref("");
export const drawerLoading = ref(false);
export const drawerConfig = () => {
  const defineDrawer = {
    layout: "horizontal",
    width: "800px",
    drawerInstance,
    loading: drawerLoading,
    visible: drawerVisible,
    title: drawerTitle,
    maskClosable: true,
    formState: drawerFormState,
    slot: {
      extra: () => {
        const { loading } = defineDrawer;
        return (
          <>
            <a-space size={8}>
              <s-button
                loading={loading.value}
                type="primary"
                onClick={async () => {
                  const { visible } = defineDrawer;
                  visible.value = false;
                }}
              >
                {$t("base.ok")}
              </s-button>
            </a-space>
          </>
        );
      },
      extra_form_item: () => {
        return (
          <>
            <a-row class="s-drawer-extra-row">
              <s-title>{$t("base.orderDetail")}</s-title>
              <a-row class="s-drawer-extra-row">
                <a-col span={8}>
                  <a-form-item label={$t("table126")}>
                    <i>{drawerFormState.order_number}</i>
                  </a-form-item>
                </a-col>
                <a-col span={8}>
                  <a-form-item label={$t("table133")}>
                    <i>{drawerFormState.origin_type}</i>
                  </a-form-item>
                </a-col>
                <a-col span={8}>
                  <a-form-item label={$t("table134")}>
                    <i>{drawerFormState.order_status}</i>
                  </a-form-item>
                </a-col>
              </a-row>

              <a-row class="s-drawer-extra-row">
                <a-col span={8}>
                  <a-form-item label={$t("table135")}>
                    <i>
                      {getTimeByZone(drawerFormState.create_time as string)}
                    </i>
                  </a-form-item>
                </a-col>
                <a-col span={8}>
                  <a-form-item label={$t("table127")}>
                    <i>
                      {getTimeByZone(drawerFormState.payment_time as string)}
                    </i>
                  </a-form-item>
                </a-col>
                <a-col span={8}>
                  <a-form-item label={$t("table13")}>
                    <i>{drawerFormState.channel_name}</i>
                  </a-form-item>
                </a-col>
              </a-row>

              <s-title>{$t("base.payInfo")}</s-title>

              <a-row class="s-drawer-extra-row">
                <a-col span={8}>
                  <a-form-item label={$t("table136")}>
                    <i>{drawerFormState.third_order_number}</i>
                  </a-form-item>
                </a-col>
                <a-col span={8}>
                  <a-form-item label={$t("table137")}>
                    <i>{drawerFormState.pay_type}</i>
                  </a-form-item>
                </a-col>
              </a-row>
              <s-title>{$t("base.buyerInfo")}</s-title>
              <a-row class="s-drawer-extra-row">
                <a-col span={8}>
                  <a-spin spinning={userDetailLoading}>
                    <a-form-item label={$t("table138")}>
                      {renderUserInfo({
                        record: drawerFormState?.user_info,
                        tableLoading: userDetailLoading,
                      })}
                    </a-form-item>
                  </a-spin>
                </a-col>

                <a-col span={8}>
                  <a-form-item label={$t("table2")}>
                    <i>{drawerFormState.phone_number}</i>
                  </a-form-item>
                </a-col>
              </a-row>

              <a-row class="s-drawer-extra-row ml8">
                <a-col span={24}>
                  <s-table
                    scroll={{ x: "auto", y: 350 }}
                    pagination={false}
                    bordered={true}
                    columns={drawerColumns}
                    dataSource={drawerFormState.dataSource}
                    onChange={(paging: {
                      current: number;
                      pageSize: number;
                    }) => {}}
                    tableSlot={{
                      bodyCell: ({
                        value,
                        text,
                        index,
                        column,
                        record,
                      }: any) => {
                        switch (column.key) {
                          case "index":
                            return (
                              <div class="s-table-body_cell">
                                <i>{index + 1}</i>
                              </div>
                            );
                          case "status":
                            return (
                              <div class="s-table-body_cell">
                                <i class={colorOptions[record.status]}>
                                  {selectDictLabel(
                                    orderStatusOptions,
                                    record.status
                                  )}
                                </i>
                              </div>
                            );

                          case "level":
                            return (
                              <div class="s-table-body_cell">
                                <i>
                                  {+record.level != 0
                                    ? "LV" + record.level
                                    : undefined}
                                </i>
                              </div>
                            );

                          case "price":
                            return (
                              <div class="s-table-body_cell">
                                <i>{record.price}</i>
                              </div>
                            );
                          case "indate":
                            return (
                              <div class="s-table-body_cell">
                                <i>
                                  {selectDictLabel(
                                    indateOptions,
                                    record.indate
                                  )}
                                </i>
                              </div>
                            );
                        }
                      },
                    }}
                  />
                </a-col>
              </a-row>
            </a-row>
          </>
        );
      },
    },
  };
  return defineDrawer;
};
